<template>
	<view class="all">
		<h2 class="border">
			请告诉我们关于在线零售商的信息
			<br />
			<br />
			<br />
		</h2>
		<view class="choose">
			<view class="input">
				<svg width="22" height="22" viewBox="0 0 36 36" colorType="dark">
					<path
						d="M16.125 3C23.374 3 29.25 8.876 29.25 16.125c0 3.386-1.282 6.472-3.387 8.8l7.11 6.867-1.159 1.199-7.145-6.902a13.074 13.074 0 01-8.544 3.161C8.876 29.25 3 23.374 3 16.125S8.876 3 16.125 3zm0 1.667c-6.328 0-11.458 5.13-11.458 11.458s5.13 11.458 11.458 11.458 11.458-5.13 11.458-11.458-5.13-11.458-11.458-11.458z"
						fill="currentColor" fill-rule="nonzero"></path>
				</svg>
				<input type="text" v-model="value" placeholder="输入网站名称或网址" @confirm="tomail" />
			</view>
			<view class="bot">
				<view class="">

				</view>
				<view class="skip" @click="tomail">
					<view class="tg">跳过</view>
					<svg width="8px" height="15px" viewBox="0 0 8 15" align="center" class="sc-gsFSXq hebHcC"><g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Forward" transform="translate(-14.000000, -10.000000)" fill="currentColor" fill-rule="nonzero"><g id="Group" transform="translate(14.000000, 10.800000)"><g id="Icon-set"><path d="M1.93581585e-14,13.0468137 L1.1575296,14.2 L7.70550587,7.67659315 C8.02514884,7.35814954 8.02514884,6.84185046 7.70550587,6.52340685 L1.1575296,-9.38577383e-15 L1.93581585e-14,1.1531863 L5.96921146,7.1 L1.93581585e-14,13.0468137 Z" id="Forward"></path></g></g></g></g></svg>
				</view>
			</view>
		</view>
		<overall :back="true" color="#fff" :backgroupcolor='false' :main_logo="true" @login="login"></overall>
	</view>
</template>

<script>
	import overall from '../overall.vue'
	export default {
		components: {
			overall
		},
		data() {
			return {
				value: '',
				mode: null,
				mylon: '',
				mylat: ''
			}
		},
		methods: {
			tomail() {
				if (this.value !== '') {
					uni.setStorageSync('website', this.value)
				}
				let status = uni.getStorageSync('login')
				if (status && status === 'success') {
					uni.navigateTo({
						url: '/pages/mail/photo'
					})
				} else {
					uni.navigateTo({
						url: '/pages/mail/mail'
					})
				}
			}
		}
	}
</script>

<style scoped>
	.all {
		display: flex;
		flex-direction: column;
		min-height: 90vh;
		padding: 15% 5% 5% 5%;
		background-image: url(/static/1.webp);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}

	.border {
		margin-top: 40rpx;
		border-left: 6px #fff solid;
		padding-left: 40rpx;
		height: max-content;
		font-size: 19px;
		font-weight: bolder;
		color: #fff;
	}

	.choose {
		margin-top: 3vh;
		width: 100%;
	}

	.input {
		border-bottom: 2px #fff solid;
		padding-bottom: 7px;
		display: flex;
		flex-direction: row;
		color: #fff;
	}

	.search {
		height: 34px;
		min-height: auto;
		border-radius: 17px;
		background-color: #000;
		color: #fff;
		cursor: pointer;
		width: 60%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.skip_img {
		width: 20px;
		height: 20px;
		color: #fff;
	}

	.skip {
		color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 56.2px;
	}

	.bot {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-top: 20px;
	}

	.item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		font-size: 13px;
		color: #fff;
		background-color: #fff;
		padding: 4%;
		margin-top: 10px;
		border: #626262 1px solid;
		line-height: 16px;
	}

	.ititle {
		font-weight: bolder;
	}

	.botchoose {
		margin-top: 10px;
	}

	.more {
		font-size: 13px;
		font-weight: bolder;
		height: 13px;
		text-decoration: underline;
		margin: 30px auto;
		text-align: center;
	}
</style>